<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>校园租赁-用户注册页</title>
    <link rel="stylesheet" th:href="@{/assets/css/styles.css}">
    <link rel="stylesheet" th:href="@{/assets/css/colors.css}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <script th:src="@{/assets/js/jquery.min.js}"></script>
    <script th:src="@{/assets/js/popper.min.js}"></script>
    <script th:src="@{/assets/js/bootstrap.min.js}"></script>
    <script th:src="@{/assets/js/custom.js}"></script>
    <script th:src="@{/assets/js/daterangepicker.js}"></script>
    <script th:src="@{/assets/js/dropzone.js}"></script>
    <script th:src="@{/assets/js/imagesloaded.js}"></script>
    <script th:src="@{/assets/js/ion.rangeSlider.min.js}"></script>
    <script th:src="@{/assets/js/jquery.magnific-popup.min.js}"></script>
    <script th:src="@{/assets/js/lightbox.js}"></script>
    <script th:src="@{/assets/js/markerclusterer.js}"></script>
    <script th:src="@{/assets/js/moment.min.js}"></script>
    <script th:src="@{/assets/js/morris.min.js}"></script>
    <script th:src="@{/assets/js/raphael.min.js}"></script>
    <script th:src="@{/assets/js/select2.min.js}"></script>
    <script th:src="@{/assets/js/slick.js}"></script>
    <script th:src="@{/assets/js/slider-bg.js}"></script>
    <script th:src="@{/assets/js/script.js}"></script>
</head>
<body>
    <!-- 复用首页头部 -->
    <header th:replace="index::header"></header>
    <!-- 提示框信息 -->
    <div class="modal fade" id="myModal" role="dialog" aria-hidden="true" style="height: 100px; width: 300px; margin: 0 auto; margin-top: 28px">
        <div class="modal-content" style="text-align: center; color: white; border-color: orange; background-color: orange; border-radius: 10px">
            <div class="modal-body" id="myModalBody">在这里添加内容</div>
        </div>
    </div>
    <!-- 填写注册信息 -->
    <div class="container" style="margin-top: -20px;">
        <div class="main" style="margin: 0 auto; width: 85%; ">
            <div class="container pl-5 pr-5 pt-3 pb-3 mt-3 mb-3">
                <h3 class="text-center text-info pb-3">注册</h3>
                <!-- 注册内容 -->
                <div class="modal-content" id="login-up">
                    <div class="modal-body">
                        <!-- 提交表单 -->
                        <form id="registerForm" method="post" th:action="@{/register}">
                            <div class="row">
                                <div class="col-lg-6 col-md-6" style="margin: 0 auto">
                                    <div class="form-group">
                                        <label>昵称<span id="usernameCheck" hidden="hidden" style="color: red"> &nbsp;(昵称不能为空)</span></label>
                                        <div class="input-with-icon">
                                            <input id="username" type="text" name="username" class="form-control" placeholder="用户昵称" onblur="check_username()">
                                            <i class="ti-info"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6" style="margin: 0 auto">
                                    <div class="form-group">
                                        <label>电子邮箱<span id="emailCheck" style="color: red" hidden="hidden"> &nbsp;(邮箱已存在)</span></label>
                                        <div class="input-with-icon">
                                            <input id="email" type="email" name="email" class="form-control" placeholder="电子邮箱，用于发送验证码" onblur="check_email()">
                                            <i class="ti-email"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6" style="margin: 0 auto">
                                    <div class="form-group">
                                        <label>密码<span id="passwordCheck" hidden="hidden" style="color: red"> &nbsp;(密码不能低于6位数)</span></label>
                                        <div class="input-with-icon">
                                            <input id="password" type="password" name="password" class="form-control" placeholder="登录密码" onblur="check_password()">
                                            <i class="ti-unlock"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6" style="margin: 0 auto">
                                    <div class="form-group">
                                        <label>确认密码<span id="passwordConfirmCheck" hidden="hidden" style="color: red"> &nbsp;(两次输入密码不相同)</span></label>
                                        <div class="input-with-icon">
                                            <input id="passwordConfirm" type="password" name="passwordConfirm" class="form-control" placeholder="请再次输入密码" onblur="check_password()">
                                            <i class="ti-unlock"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6" style="margin: 0 auto">
                                    <div class="form-group">
                                        <label>验证码<span id="emailCodeCheck" hidden style="color: red"> &nbsp;(验证码错误)</span></label>
                                        <div class="row">
                                            <div class="input-with-icon col-sm-7">
                                                <input id="emailCode" type="text" name="emailCode" class="form-control" placeholder="请输入邮箱验证码" onfocus="error_clear()">
                                            </div>
                                            <div class="input-with-icon col-sm-4">
                                                <button type="button" onclick="sendEmailCode()" class="text-white full-width btn pop-login bg-2" style="height: 36px; text-align: center; line-height: 0.1">获取验证码</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6" style="margin: 0 auto">
                                    <div class="form-group">
                                        <label>角色</label>
                                        <div class="simple">
                                            <select name="role" class="form-control">
                                                <option value="customer">学生租客</option>
                                                <option value="owner">房东</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6" style="margin: 0 auto">
                                    <div class="form-group">
                                        <button type="button" onclick="submitRegister()" class="text-white full-width btn btn-md pop-login bg-2">创建账号</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 复用首页底部 -->
    <div th:replace="index::footer"></div>
</body>
</html>